<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>百色学院社团管理系统-登录</title>
    <style>

        .form-group-b {
            display: flex;

            justify-content: space-between;
        }

        .form-box-img {
            /*display: flex;*/
            /*justify-content: space-between;*/
            /*align-content: center;*/
            /*width: 100%;*/
            position: relative;
        }
        /*.form-control-f{*/
        /*    display: inline-block;*/
        /*    position: absolute;*/
        /*    right: 15px;*/
        /*}*/
        .form-control-i{
            width: 100%;
            display: block;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;


        }
        .verfier_img_box{
            height: 34px;
            position: absolute;
            right: 0;
            top:0 ;

        }



    </style>

    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/js/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/fonts.googleapis.com.css">
        <link rel="stylesheet" href="/css/login.css" type="text/css">
    <!--    <link rel="stylesheet" href="/css/a.css">-->

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/adminlte/js/adminlte.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>

    <script>
        $(function () {

            //为表单元素添加失去焦点事件
            $("form input").blur(function () {
                //验证密码
                var password = null;
                if ($(this).is(".password")) {
                    password = $.trim(this.value);  //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                    if (password == "" || password.length < 1 || password.length > 15) {
                        var errorMsg = " 密码非空，长度应为1-15个字符！";
                        //class='msg onError' 中间的空格是层叠样式的格式
                        $(".err-tip2").append("<span class='msg onError'>" + errorMsg + "</span>");
                    } else {
                        var okMsg = " 输入正确";
                        $(".err-tip2").append("<span class='msg onSuccess'>" + okMsg + "</span>");
                    }
                }

                //验证验证码
                if ($(this).is(".randomCode")) {
                    var verifyCode = $.trim(this.value); //原生js去空格方式：this.replace(/(^\s*)|(\s*$)/g, "")
                    if (verifyCode == "" || verifyCode.length != 4) {
                        var errorMsg = " 短信验证码非空，长度应为4个字符！";
                        //class='msg onError' 中间的空格是层叠样式的格式
                        $(".err-tip4").append("<span class='msg onError'>" + errorMsg + "</span>");
                    } else {
                        var okMsg = " 输入正确";
                        $(".err-tip4").append("<span class='msg onSuccess'>" + okMsg + "</span>");
                    }
                }
            })

            // 用户类型
            $("#rdoAdmin").click(function () {
                $("#loginForm").attr("action", "/users/adminLogin.do")
            })
            $("#rdoAsso").click(function () {
                $("#loginForm").attr("action", "/users/associationLogin.do")
            })
            $("#rdoMem").click(function () {
                $("#loginForm").attr("action", "/users/memberLogin.do")
            })

            // 登录
            $(".submitBtn").click(function () {
                /*var params = $("#loginForm").serialize();//一次性获取表单中的所有参数
                $.post($("#loginForm").attr("action"),params,function (data) { //jsonresult
                    if(data.code == 200){
                        window.location.href = data.data;
                    }else{
                        alert(data.msg)
                    }
                })*/
                $("#loginForm").ajaxSubmit({
                    url: $("#loginForm").attr("action"),
                    type: "POST",
                    success: function (data) {
                        console.log("code:" + data.code + ",msg:" + data.msg + ",data:" + data.data)
                        if (data.code == 200) {
                            window.location.href = data.data;
                        } else {
                            alert(data.msg);
                            window.location.reload()
                        }
                    }
                })
            })
        })
    </script>
</head>
<body class="hold-transition login-page" style="background-image: url('https://luowowo-12.oss-cn-shenzhen.aliyuncs.com/login2.jpg');">
<div class="login-box">
    <div class="login-logo">
        百色学院社团管理系统
    </div>
    <div class="login-box-body">
        <p class="login-box-msg" style="font-size: 22px">用户登录</p>
        <form method="post" id="loginForm" action="">

            <div class="form-group has-feedback  login-feesback">
                <span class="glyphicon glyphicon-leaf form-control-feedback"></span>
                <input type="text" autocomplete="off" class="form-control" placeholder="请输入学号/编号" name="number"
                       value="">
            </div>
            <div class="form-group has-feedback">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                <input type="text" autocomplete="off" class="form-control" placeholder="请输入用户名" name="username"
                       value="">
            </div>
            <div class="form-group has-feedback">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                <input type="password" class="form-control" placeholder="请输入密码" name="password" value="">
            </div>
            <div class="form-group has-feedback  form-box-img">
<!--                                <span class="glyphicon glyphicon-text-width form-control-feedback"></span>-->
<!--                <span class="glyphicon glyphicon-text-width form-control-f" ></span>-->

                <!--                <input type="text" class="form-control" autocomplete="off" placeholder="请输入验证码" name="randomCode"-->
                <!--                       value="">-->
                <!--                <br/>-->

                    <input type="text" class="form-control-i" autocomplete="off" placeholder="请输入验证码" name="randomCode"
                           value="">
                    <img id="checkcode_img" class="verifier-code checkcode_img verfier_img_box " src="/users/randomCode.do"
                         onclick="this.src='/users/randomCode.do?'+Math.random()" alt="验证码"
                         title="请将图中的数字或者字母填写到右方的输入框中，如果看不清楚，请点击图片更换"/>



            </div>
            <div class="form-group">
                &nbsp;用户类型：
                <span id="rolebox">
                    <span>
                        <input type="radio" id="rdoAdmin" name="state" value="3"/>
                        <label for="rdoAdmin">管理员</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    <span>
                        <input type="radio" id="rdoAsso" name="state" value="2"/>
                        <label for="rdoAsso">社团</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    <span>
                        <input type="radio" id="rdoMem" name="state" value="1"/>
                        <label for="rdoMem">学生</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                </span>
            </div>

            <div class="form-group form-group-b">
                &nbsp;
                <div class="col-xs-5">
                    <button id="_js_loginBtn" type="button" class="btn btn-primary btn-block btn-flat submitBtn">登录
                    </button>
                </div>
                <div class="col-xs-5">
                    <button type="reset" class="btn btn-primary btn-block btn-flat">重置</button>
                </div>
            </div>
        </form>

        <div class="bottom-link">
            还没有学生帐号? &nbsp;&nbsp;&nbsp;&nbsp;<a href="/regist.html" style="font-size: 16px">马上注册</a>
        </div>

    </div>
</div>
</body>
</html>
